<template>
  <view :style="grid"><slot></slot></view>
</template>

<script lang="ts" setup>

import { computed, getCurrentInstance } from 'vue'

interface Props {
  // 每列显示个数
  span?: number;
  // 栅格间隔
  gutter?: number;
  // 五个响应尺寸：xs、sm、md、lg 和 xl。
  xs?: number;
  sm?: number;
  md?: number;
  lg?: number;
  xl?: number;
}
const props = withDefaults(defineProps<Props>(), {
  span: 0,
  gutter: 0,
  xs: 0,
  sm: 0,
  md: 0,
  lg: 0,
  xl: 0,
});

const column = (e: any, n: number) => {
  for (let i = 0; i < n; i++) {
    e += ' auto'
  }
  return e
}

const { proxy } = getCurrentInstance();
const { $WitWidth } = proxy;
const grid = computed(() => {
  const { wxs, wsm, wlg, wxl } = {wxs: 768, wsm: 992, wlg: 1200, wxl: 1920}
  let n = 'grid-template-columns:'
  if (props.span) {
    n = column(n, props.span)
  } else if ($WitWidth < wxs && props.xs) {
    n = column(n, props.xs)
  } else if ($WitWidth < wsm && props.sm) {
    n = column(n, props.sm)
  } else if ($WitWidth < wlg && props.md) {
    n = column(n, props.md)
  } else if ($WitWidth < wxl && props.lg) {
    n = column(n, props.lg)
  } else if (props.xl) {
    n = column(n, props.xl)
  }
  let grid = `display: grid;${n};`
  if (props.gutter) {
    grid = `${grid}grid-gap: ${props.gutter*2}rpx;`
  }
  return grid
})

</script>

<style scoped>

</style>